<template>
  <div class="yl-clearfix">
    <div class="searchgrid">

      <select class="yl-select-option yl-float-left" v-model="filters.status" @change="fetchMessageList">
        <option :value="null">全部</option>
        <option :value="1">成功</option>
        <option :value="0">失败</option>
      </select>
      <div class="yl-float-right">
        <input v-model="filters.keyword" type="text" placeholder="手机号码">
        <input class="yl-input-button" value=" 查询 " type="button" @click="fetchMessageList">
      </div>
      <div class="clearfix"></div>
    </div>
    <div class="tab-content default-tab" style="display: block;">
      <el-table :data="pagination.data"
                highlight-current-row
                v-loading="listLoading"
                style="width: 100%;">
        <el-table-column label="客户姓名" prop="client.real_name"></el-table-column>
        <el-table-column label="电话号码" prop="cellphone"></el-table-column>
        <el-table-column label="内容" prop="msg_content" min-width="160"></el-table-column>
        <el-table-column label="发送时间" prop="send_time"></el-table-column>
        <el-table-column label="发送状态">
          <template scope="scp">
            {{scp.row.status > 0 ? '成功' : '失败'}}
          </template>
        </el-table-column>

        <el-table-column label="直属代理" prop="relation.direct_agent_id">
          <template scope="scp">
            <span v-if="scp.row.relation" v-text="scp.row.relation.direct_agent_id"></span>
            <span v-if="!scp.row.relation" v-text="scp.row.agent_id"></span>
          </template>


        </el-table-column>
        <el-table-column label="代理商1" prop="relation.agent1"></el-table-column>
        <el-table-column label="代理商2" prop="relation.agent2"></el-table-column>
        <el-table-column label="代理商3" prop="relation.agent3"></el-table-column>
        <el-table-column label="代理商4" prop="relation.agent4"></el-table-column>
        <el-table-column label="代理商5" prop="relation.agent5"></el-table-column>

      </el-table>


      <div class="yl-pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="pageIndexChange"
          :current-page="pagination.current_page"
          :page-sizes="[15, 30, 45, 60]"
          layout="total, sizes, prev, pager, next, jumper"
          :page-size="parseInt(pagination.per_page)"
          :total="pagination.total"
          style="float:right;">
        </el-pagination>
      </div>

    </div>
  </div>

</template>

<script>
  import {getAgentMessageList} from '../../api/client';

  export default {
    data() {
      return {
        filters: {
          keyword: '',
          page: 1,
          size: 15,
          status: null,
        },
        pagination: {},
        listLoading: false,
      };
    },
    methods: {
      pageIndexChange(clickPageIndex) {
        //分页页面发生改变
        this.filters.page = clickPageIndex;
        this.fetchMessageList();
      },
      //获取用户列表
      fetchMessageList() {
        let params = this.filters;
        this.listLoading = true;
        getAgentMessageList({params}).then((res) => {
          this.pagination = res.data;
          this.listLoading = false;
        }).catch(error => this.ezNotifyAxiosCatch(error));
      },
      handleSizeChange(size) {
        this.filters.size = size;
        this.filters.page = 1;
        this.fetchMessageList();
      },
    },
    mounted() {
      this.fetchMessageList();
    },
  };
</script>

